<template>
  <div>
    <h1>购物车</h1>
    <p>carmoule数据-子模块数据</p>
    <ul>
      <li v-for="item in $store.state.carmodule.carlist" :key="item.id">
        {{ item.proname }} --{{ item.price }}
      </li>
    </ul>
    <!--getter中的计算属性 -->
    <ul>
      <li
        v-for="item in $store.getters['carmodule/filtercarlist']"
        :key="item.id"
      >
        {{ item.proname }} --{{ item.price }}
      </li>
    </ul>
    <p>
      <button @click="addcarFn">加入购物车数据-同步</button>
      <button @click="addcarAsyncFn">加入购物车数据-异步</button>
    </p>
  </div>
</template>

<script>
// 使用常规方法获取子仓库中的数据

export default {
  name: "",
  data() {
    return {};
  },
  created() {
    console.log(this.$store);
  },
  methods: {
    addcarFn() {
      // 同步加入购物车
      // 调用仓库中的加入购物车的mutations中的addcar方法
      // 语法:  this.$store.commit("模块名/方法名",参数)
      this.$store.commit("carmodule/addcar", {
        id: 3,
        proname: "小米电脑",
        price: 6000,
        num: 3,
      });
    },
    addcarAsyncFn() {
      // 异步加入购物车
      this.$store.dispatch("carmodule/addCarAsync", {
        id: 4,
        proname: "宏基电脑",
        price: 4000,
        num: 5,
      });
    },
  },
};
</script>
<style scoped>
</style>